<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>员工信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <el-input v-model="staff_input.name" placeholder="请输入姓名" clearable size="medium" @clear='input_clear' class="staff_input" :class="{staff_inputLeft:purClass}"></el-input>
      <el-button type="primary" size="medium" class="staff_search" @click="btn_search">查找</el-button>
      <el-button type="primary" size="medium" class="staff_create" @click="dialogCreate=true" v-if="purview">添加</el-button>

      <!-- 表格信息 -->
      <el-table :height="TableHeight" class="staff_table" :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序列" width="50px">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="sex" label="性别">
        </el-table-column>
        <el-table-column prop="years" label="年龄">
        </el-table-column>
        <el-table-column prop="identity" label="职位">
        </el-table-column>
        <el-table-column prop="phone_number" label="电话">
        </el-table-column>
        <el-table-column label="操作" v-if="purview">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="primary" size="small" icon="el-icon-edit" circle></el-button>
            <el-button type="danger" size="small" @click="deleStaff(scope.row)" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 修改对话框 -->
      <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
        <el-form :model="form_update" label-width="70px" ref="staffUpdatetext">
          <el-form-item label="姓名">
            <el-input disabled v-model="form_update.name"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input disabled v-model="form_update.sex"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form_update.years"></el-input>
          </el-form-item>
          <el-form-item label="职位">
            <el-input v-model="form_update.identity"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form_update.phone_number"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editUserInfo">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 添加对话框 -->
      <el-dialog title="添加信息" :visible.sync="dialogCreate" @close="addDiaClosedStaff" @open="open_time">
        <el-form :model="form_create" ref="addFormRefstaff" label-width="70px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form_create.name"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-input v-model="form_create.sex"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="years">
            <el-input v-model="form_create.years"></el-input>
          </el-form-item>
          <el-form-item label="职位" prop="identity">
            <el-input placeholder="请输入或选择职位" v-model="form_create.identity">
              <el-select v-model="form_create.identity" slot="prepend">
                <el-option :value="items" v-for="(items,index) in identity_staff" :key="index+'w'"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone_number">
            <el-input v-model="form_create.phone_number"></el-input>
          </el-form-item>
          <el-form-item label="日期" prop="createdAt">
            <el-input disabled v-model="form_create.createdAt"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="dialogCreate = false">取 消</el-button>
          <el-button type="primary" @click="btn_create">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'StaffInf',
  data () {
    return {
      // 搜索框
      staff_input: {
        name: ''
      },
      // 表格信息
      tableData: [],
      // 权限控制
      purview: false,
      pur: null,
      purClass: false,
      // 对话框弹出隐藏
      dialogFormVisible: false,
      dialogCreate: false,
      // 修改数据
      form_update: {
        name: '',
        sex: '',
        years: '',
        identity: '',
        phone_number: ''
      },
      // 删除请求参数
      deleReq: {
        name: ''
      },
      // 添加的数据
      form_create: {
        name: '',
        sex: '',
        years: '',
        identity: '',
        phone_number: '',
        createdAt: ''
      },
      // 职位
      identity_staff: ['总监', '助理', '发型师', '学徒', '前台'],
      TableHeight: 0

    }
  },
  methods: {
    async getStaff () {
      const { data: res } = await this.$http.get('getStaff')
      this.tableData = res.data
      // eslint-disable-next-line eqeqeq
      this.pur == 1 ? this.purview = true : this.purview = false
    },
    // 修改按钮
    async handleClick (row) {
      this.dialogFormVisible = true
      this.form_update = row
    },
    // 修改信息确定按钮
    async editUserInfo () {
      this.$refs.staffUpdatetext.validate(async valid => {
        // console.log(valid);
        if (!valid) return
        // 发起修改用户信息的数据请求
        const { data: res } = await this.$http.post('staffUpdate', this.form_update)
        if (res.meta.status !== 200) return this.$message.error('修改失败')
        this.$message.success('修改成功')
        this.dialogFormVisible = false
        this.getStaff()
      })
    },
    async btn_search () {
      const { data: res } = await this.$http.get('staffSearch', { params: this.staff_input })
      if (res.meta.status !== 200) return this.$message.error('搜索失败')
      this.$message.success('搜索成功')
      this.tableData = res.data
    },
    input_clear () {
      this.getStaff()
    },
    // 删除信息按钮
    async deleStaff (row) {
      // console.log(row)
      this.deleReq.name = row.name
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error)
      // 如果用户确认删除，则返回值为字符串confirm
      // 如果用户取消了删除，则返回值为字符串cancel
      // console.log(confirmResult);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消')
      }
      const { data: res } = await this.$http.get('staffDele', { params: this.deleReq })
      if (res.meta.status !== 200) return this.$message.error('删除失败')
      this.$message.success('删除成功')
      this.getStaff()
    },
    // 添加按钮打开时的回调
    open_time () {
      const newDate = new Date()
      this.form_create.createdAt = newDate.getFullYear() + '-' + (newDate.getMonth() + 1) + '-' + newDate.getDate() + ' ' + newDate.getHours() + ':' + newDate.getMinutes() + ':' + newDate.getSeconds()
    },
    // 添加信息按钮
    async btn_create () {
      this.$refs.addFormRefstaff.validate(async valid => {
        // console.log(valid);
        if (!valid) return // this.$message.error('添加失败')
        // 可以发起添加用户的网络请求
        const { data: res } = await this.$http.post('staffCreate', this.form_create)
        if (res.meta.status !== 200) return this.$message.error('添加失败')
        this.$message.success('添加成功')
        this.dialogCreate = false
        this.getStaff()
      })
    },
    // 监听添加用户对话框的关闭事件
    addDiaClosedStaff () {
      this.$refs.addFormRefstaff.resetFields()
    }
  },
  created () {
    this.getStaff()
    this.pur = window.localStorage.purview
    // eslint-disable-next-line eqeqeq
    this.pur == 1 ? this.purClass = false : this.purClass = true
    // 动态计算表格高度
    const windowHeight = document.documentElement.clientHeight || document.bodyclientHeight
    this.TableHeight = windowHeight - 210 // 数值"140"根据需要调整
  }
}
</script>

<style scoped lang='scss'>
.el-card {
  margin-top: 10px;
  height: calc(100vh - 130px);
  .staff_input {
    width: 200px;
  }
  .staff_search {
    margin-left: 10px;
  }
  .staff_table {
    margin-top: 20px;
    height: 100%;
  }
}
.staff_inputLeft {
  margin-left: -80px;
}
</style>
